Эллипс в Chrome: CSS corner-shape

СуперЭЛЛИПС доступен в Chrome!

Что? Не знаете о чем я? А помните iOS7 с великолепным* дизайном?

*да, у них прямо так и написано в релизноутс

Apple тогда представили новый дизайн иконок в айфонах, от которого все дизайнеры были одновременно в восторге и в ужасе, потому что всем захотелось, но не было даже инструментов, чтобы такое нарисовать, кроме как через кривые.

Веб-разработчики же тогда масово встали в позу: — Рисуйте что хотите, всё равно мы такое верстать не будем. Кто-то конечно верстал: вставлял картинками или svg. Колхоз, не иначе.

Но вот пришел тот самый год, когда мы наконец-то можем на изи повторить этот прорывной дизайнерский ход! В 139 версию хромиума и все браузеры на его основе завезли свойство corner-shape. Мне даже пришлось свой Arc обновить, чтобы заработало. Попробуйте тоже поиграться, очень интересные формы можно делать.

Ах, да. В Сафари конечно же это не работает.

Ниже держите туториал, как за два CSS-свойства из квадратной иконки сделать супер-пупер-эллипс.

© Счастливый фронтендер